<template>
  <div id="seachplaylist" >
    <table class="seachplaylisttable" ref="refs_seachplaylist">
      <tr v-for="item in playlists" :key="item.id" @click="toplayerid(item.id)">
        <th class="seachplaylistimg"><img :src="item.coverImgUrl" alt=""></th>
        <th class="seachplaylistname">{{item.name}}</th>
        <th>{{item.creator.nickname}}</th>
        <th>{{getplayount(item.playCount)}}</th>
        <th>{{item.trackCount}}首</th>
      </tr>
      
    </table>

    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage3"
        :page-size="100"
        layout="prev, pager, next, jumper"
        :total="1000">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getseach } from "../../../../network/songlist";
export default {
  name: 'SeachPlayList',
  data() {
    return {
      playlists:null,
      namepath: '/SeachMusic/SeachPlayList',
      currentPage3:1
    }
  },
  methods: {
    getwachseach() {
      getseach(this.$route.query.type,this.$route.query.offset,this.$route.query.keywords).then((res) => {
        //console.log(res);
        this.playlists = res.data.result.playlists;
        });
      //console.log("调用api");
      //判断路由是否为type=1才进行数据请求 解决@BUG2
      /* if (this.$route.query.type == 1) {
        getseach(
          1000,
          this.$route.query.offset,
          this.$route.query.keywords
        ).then((res) => {
          console.log(res.data.result.playlists);
          //判断enter为yes  -> 进行数组清空，
          switch (this.$route.query.enter) {
            case (this.$route.query.enter = "yes"):
              this.playlists = res.data.result.playlists;
              //enter修改为no时候浏览器地址不会显示改变的值
              this.$route.query.enter = "no";
              break;
            default:
              //ener为no -> 进行合并数组
              this.playlists = this.playlists.concat(res.data.result.playlists);
              //console.log(this.$route.query.enter);
              break;
          }
          //this.songlisttracks = this.songlisttracks.concat(res.data.result.songs)
          //console.log(res.data.result.songs);
        });
      } else {
        console.log("无数据搜索");
      } */
    },
    toplayerid(id) {
      this.$router.push({
        path: '/playlist',
        query: {
          id
        }
      })
    },
    //分页变动进行更新
    handleCurrentChange() {
      //重新query地址中的offset
      this.$router.push({
        path: this.$router.path,
        query: {
          type: 1000,
          offset:(this.currentPage3 - 1 ) * 30,
          keywords:this.$route.query.keywords
        }
      }).catch(err => err)
      console.log("歌单下一页",(this.currentPage3 - 1 ) * 30);
      //let a = this.currentPage
      //进行页数offset跟新请求
      getseach(1000,(this.currentPage3 - 1 ) * 30 ,this.$route.query.keywords).then(res => {
        this.playlists = res.data.result.playlists;
        //console.log(res.data);
      })
      //给父组件传达置顶信息
      this.$emit('set_scrolltop')
    },
    //判断返回万的单位
    getplayount(val) {
      if (val >= 10000) {
        let a = val*0.0001;
        return a.toFixed(1) + "万人播放"
      }else {
        return val + "人播放"
      }
      
    }
  },
  computed: {

  },
  activated() {
    //console.log(this.$route.query.keywords,"组件被激活了");
    //console.log(this.playlists);
    if (this.playlists == null) {
      //console.log("list被请求了");
      this.getwachseach()
    }
  },


  watch: {
    "$route.query.keywords"(val,oval) {
      //搜索框值变进行数据清空
      this.playlists = null;
      console.log(val,oval,"歌单",this.$route.query.keywords,this.$route.path,this.namepath);
      if (this.$route.path == this.namepath) {
        console.log("歌单触发了api");
        this.getwachseach()
      }
    }


    /* "$route.query.keywords": {
      //immediate:true,
      //deep: true,
      handler(val, oval) {
          console.log("list---值不一样，进行数据请求",val,oval);
          this.getwachseach();
      },
    }, */
  },

}
</script>

<style>
#seachplaylist {

}
.seachplaylistimg {
  width: 80px;
  height: 80px;
}
.seachplaylistimg img {
  width: 60px;
  border-radius: 10px;
}
.seachplaylisttable {
  width: 100%;
}
.seachplaylistname {
  width: 300px;
  text-align: left;
}
</style>